<template>

  <el-dialog custom-class="dia-class" :visible.sync="visibleP" :before-close="handleClose" center="">
    <header slot="title">
                <span class="title">
                  转让操作
                </span>
              </header>
              <section>
                <article>
                  <ul>
                    <li class="wd-3">
                      <span>币别: <em>{{detailsP.arInvoiceList[0].currencyDesc}}</em></span>
                    </li>
                    <li class="wd-3">
                      <span>单位: <em>{{detailsP.arInvoiceList[0].currencyUnitName}}</em></span>
                    </li>
                    <li class="wd-3">
                      <span>待转让金额: <em>{{detailsP.transAmt}}</em></span>
                    </li>
                  </ul>
                </article>
                <article>
                  <el-table ref="tableTransGou" :data="detailsP.arInvoiceList" border style="width: 100%">
                    <el-table-column align="center" prop="masterChainId" :formatter="nullDealWith" label="AR单号" width="180">
                    </el-table-column>
                    <el-table-column align="center" prop="billPayDate" :formatter="dateFormat" label="票据到期日" width="110">
                    </el-table-column>
                    <el-table-column align="center" prop="invoiceNo" :formatter="nullDealWith" label="发票号码">
                    </el-table-column>
                    <el-table-column align="right" header-align="center" prop="afterTaxAmt" :formatter="regexNum" label="发票票面金额"
                      width="120">
                    </el-table-column>
                    <el-table-column align="right" header-align="center" prop="availableAfterTaxAmt" :formatter="regexNum"
                      label="发票可用金额" width="120">
                    </el-table-column>
                    <el-table-column align="center" label="转让金额" width="120">
                      <template slot-scope="scope">
                        <el-jx-input :autofocus="true" v-model='scope.row.transferAfterTaxAmt' placeholder=''
                          @input.native="handleInput('availableAfterTaxAmt',scope.row,$event,detailsP.arInvoiceList)"
                          >
                        </el-jx-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </article>
                <article>
                  <el-form class="layout form text-align-left" label-width="100px">
                    <el-row>
                      <el-col :span="9"></el-col>
                      <el-form-item label="转让总金额:">
                        {{displaySumAmtTrans}}
                      </el-form-item>
                    </el-row>
                    <el-row >
                        <el-col :span="9" class="flex">
                            <el-form-item label="授让公司Id:" prop="receiveCustId">
                              <el-input v-model.trim="receiveCustId" placeholder="请输入授让公司Id"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="9" class="flex">
                            <el-form-item label="授让公司名:">
                              {{this.rc.name}}
                            </el-form-item>
                          </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="18" class="flex">
                        <el-form-item label="备注:">
                          <el-input type="textarea" v-model.trim="remark" :maxlength="255" :autosize="{ minRows: 3, maxRows: 6}"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                        <el-checkbox-group v-model="agreeCheckList">
                            <el-checkbox label="agree1">我确认本次债券可以被转让</el-checkbox>
                            <el-checkbox label="agree2">我确认本次债券真实有效无任何纠纷</el-checkbox>
                        </el-checkbox-group>
                    </el-row>
                  </el-form>
                </article>
              </section>
              <footer class="no-print" slot="footer" :style="'clear:both'">
                <el-button type="primary" @click="transSub(0,detailsP,detailsP.arInvoiceList)">确认</el-button>
              </footer>
  </el-dialog>
</template>
<style scoped lang="scss">
@import "@/assets/css/_dialog.scss";
.layout.form {
  margin-top: 20px;
  padding-left: 10px;
}
.sum-content {
  height: 40px;
  line-height: 40px;
  padding-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

<script>
import DialogClose from '@/mixins/suplier/Ar/DialogClose'
import Common from '@/mixins/common/common'
import DialogTrans from '@/mixins/suplier/arApi/dialogTrans'
import { debounce } from '@/util/util' // 防抖函数
import Input from '@/components/Items/inputNumber'
/* 转让弹窗 */
export default {
  props: ['visibleP', 'detailsP'],
  mixins: [DialogClose, Common, DialogTrans],
  components: {
    'el-jx-input': Input
  },
  data () {
    return {
      displaySumAmtTrans: '0.00', // 已选总金额
      agreeCheckList: [], // 同意协议勾选
      receiveCustId: '', // 授让公司id
      rc: {
        name: '', // 授让公司名称
        status: false // 是否正确
      },
      remark: '' // 备注
    }
  },
  watch: {
    receiveCustId: debounce(function (val) {
      this.axios.post('/commonCust/queryCustomer.do', { 'custId': val, 'companyName': '' }).then(res => {
        if (res.data.status) {
          this.rc.name = res.data.data.companyName
          this.rc.status = true
        } else {
          this.rc.name = '授让公司不存在'
          this.rc.status = false
        }
      })
    }, 1000)
  },
  computed: {
    getTitle () {
      return this.detailsP.masterChainId + '转让'
    }
  },
  methods: {
    // 转让确认
    transSub: debounce(transSub, 1000, true),
    init: Init
  }
}
// 转让确认
function transSub (type, originData, selection) {
  // 1.判断是否填写正确授让公司
  if (!this.rc.status) {
    this.$message({
      type: 'error',
      message: '请填写正确授让公司id'
    })
    return
  }
  // 判断是否同意协议
  if (this.agreeCheckList.length !== 2) {
    this.$message({
      type: 'error',
      message: '有未勾选确认项'
    })
    return
  }
  // 2.将要发送的数据
  var data = {
    arInvoiceList: selection,
    transAmt: originData.transAmt,
    custToId: this.receiveCustId,
    custToName: this.rc.name,
    remark: this.remark,
    interfaceTransSerial: this.$store.getters.interfaceTransSerial
  }
  let url = '/multiArTransferManager/multiInitiateTransfer.do'
  this.post(url, data, true).then(res => {
    // 操作成功 关闭弹窗
    if (res.data.status) {
      // 关闭弹窗
      this.handleClose()
      // 刷新数据
      this.$parent.fresh()
    }
  }).catch((err) => {
    // 错误提示
    console.log(err)
  })
}
function Init () {
  this.agreeCheckList = []
  this.rc = {
    name: '', // 授让公司名称
    status: false // 是否正确
  }
  this.receiveCustId = ''
  this.remark = ''
}
</script>
